<template>
  <div class="aa" @mouseleave="navLeave">
    <div class="nav-menu clearfix">
      <ul class="clearfix">
        <li @mouseenter="navEnter(index)" :class=item.classname v-for="(item,index) in firstNav" :key="index">
          <span class="sep" v-if="item.isSep"></span>
          <router-link :to="item.to" v-else>{{item.label}}</router-link>
        </li>
      </ul>
      <ul class="nav_li_xt clearfix" v-show="isShow">
        <li v-for="(item,index) in secondNav[sIndex]" :key="index">
          <router-link to="/home">
            <img :src=item.picHoverSrc alt="" class="fl" />
            <span class="co_sp fl" style="color:#00d3d5">{{item.name}}</span>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import nav from "../../static/json/navjson"
  export default {
    data(){
      return{
        firstNav:nav.datas.first,
        secondNav:nav.datas.second,
        isShow: false,
        sIndex: 0
      }
    },
    methods:{
      navEnter(index){
        this.sIndex = index;
        if(this.secondNav[index][0].name != ""){
          this.isShow = true;
        }
      },
      navLeave(){
        this.isShow = false;
      }
    }
  }
</script>

<style scoped>
  .nav-menu{
    width: 100%;
    margin: 0 auto;
    background-color: #152072;
  }
  .nav-menu ul{
    padding-left: 60px;
  }
  .nav-menu li{
    float: left;
    height: 52px;
    line-height: 52px;
    margin-top: 4px;
    margin-bottom: 4px;
    position: relative;
  }
  .nav-menu .nav-item:hover{
    margin-top: 0;
    border-top: 4px solid #00bfed;
  }
  .nav-menu a{
    text-decoration: none;
    font-size: 20px;
    color: #eef2f4;
  }
  .nav-menu .sep{
    margin: 18px 20px;
    color: #eef2f4;
    border-right:1px dashed #ccc;
    height:16px;
    width:1px;
    display: inline-block;
  }
  .nav_li_xt{
    background-color: #55539e;
  }
</style>
